<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript">
        EvPNG.fix('div, ul, img, li, input, a');
    </script>
    <![endif]-->


    <title>尤洪</title>
    <style type="text/css">
        #goPage div {
            width: 30px;
            height: 30px;
            display: inline-block;
            font-size: 11px;
            font-weight: bolder;
            border: 1px solid #b6b6b6;
            margin-left: 10px;
            cursor: pointer; /* 添加小手光标 */
        }

        #goPage {
            margin-top: 40px;
        }

        #goPage div:hover {
            background-color: #b6b6b6;
        }

        .myBack {
            font-weight: bold;
            background-color: #ff4e00;
        }

        /*th {*/
        /*    width: 33%;*/
        /*    font-size: 14px;*/
        /*}*/

        /*td {*/
        /*    font-size: 12px;*/
        /*}*/
    </style>
</head>
<body>
<!--Begin Header Begin-->
<div id="myVue">
    <div class="soubg">
        <div class="sou">
            <!--Begin 所在收货地区 Begin-->
            <span class="s_city_b">
        	<span class="fl">送货至：</span>
            <span class="s_city">
            	<span>四川</span>
                <div class="s_city_bg">
                	<div class="s_city_t"></div>
                    <div class="s_city_c">
                    	<h2>请选择所在的收货地区</h2>
                        <table border="0" class="c_tab" style="width:235px; margin-top:10px;" cellspacing="0"
                               cellpadding="0">
                          <tr>
                            <th>A</th>
                            <td class="c_h"><span>安徽</span><span>澳门</span></td>
                          </tr>
                          <tr>
                            <th>B</th>
                            <td class="c_h"><span>北京</span></td>
                          </tr>
                          <tr>
                            <th>C</th>
                            <td class="c_h"><span>重庆</span></td>
                          </tr>
                          <tr>
                            <th>F</th>
                            <td class="c_h"><span>福建</span></td>
                          </tr>
                          <tr>
                            <th>G</th>
                            <td class="c_h"><span>广东</span><span>广西</span><span>贵州</span><span>甘肃</span></td>
                          </tr>
                          <tr>
                            <th>H</th>
                            <td class="c_h"><span>河北</span><span>河南</span><span>黑龙江</span><span>海南</span><span>湖北</span><span>湖南</span></td>
                          </tr>
                          <tr>
                            <th>J</th>
                            <td class="c_h"><span>江苏</span><span>吉林</span><span>江西</span></td>
                          </tr>
                          <tr>
                            <th>L</th>
                            <td class="c_h"><span>辽宁</span></td>
                          </tr>
                          <tr>
                            <th>N</th>
                            <td class="c_h"><span>内蒙古</span><span>宁夏</span></td>
                          </tr>
                          <tr>
                            <th>Q</th>
                            <td class="c_h"><span>青海</span></td>
                          </tr>
                          <tr>
                            <th>S</th>
                            <td class="c_h"><span>上海</span><span>山东</span><span>山西</span><span
                                    class="c_check">四川</span><span>陕西</span></td>
                          </tr>
                          <tr>
                            <th>T</th>
                            <td class="c_h"><span>台湾</span><span>天津</span></td>
                          </tr>
                          <tr>
                            <th>X</th>
                            <td class="c_h"><span>西藏</span><span>香港</span><span>新疆</span></td>
                          </tr>
                          <tr>
                            <th>Y</th>
                            <td class="c_h"><span>云南</span></td>
                          </tr>
                          <tr>
                            <th>Z</th>
                            <td class="c_h"><span>浙江</span></td>
                          </tr>
                        </table>
                    </div>
                </div>
            </span>
        </span>
            <!--End 所在收货地区 End-->
            <span class="fr">
                <span class="fl"><span v-if="loginUser.loginName===''">你好，请<a href="Login.html">登录</a>&nbsp; </span><span v-else>欢迎：<span style="font-weight: bolder;color: #ff3600">{{loginUser.loginName}}</span>&nbsp;&nbsp;</span><a v-if="loginUser.loginName!==''" href="#" @click.prevent="loginOut()">注销</a> <a
                        href="Regist.html" style="color:#ff4e00;">免费注册</a>&nbsp;|&nbsp;<a
                        href="Member_Order.html">我的订单</a>&nbsp;|</span>
        	<span class="ss">
                <div class="ss_list">
                	<a href="#">管理中心</a>
                    <div class="ss_list_bg">
                    	<div class="s_city_t"></div>
                        <div class="ss_list_c">
                        	<ul>
                            	<li><a href="Member_Safe.html">账户管理</a></li>
                                <li><a href="NewsList.html">资讯列表</a></li>
                                <li><a href="ProductList.html">商品列表</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="ss_list">
                	<a href="#">网站导航</a>
                    <div class="ss_list_bg">
                    	<div class="s_city_t"></div>
                        <div class="ss_list_c">
                            <ul>
                                <li><a href="Member_Collect.html">我的收藏</a></li>
                                <li><a href="CategoryList.html">全部商品</a></li>
                                <li><a href="BuyCar.html">购物车</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </span>
            <span class="fl">|&nbsp;关注我们：</span>
            <span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span>
            <span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img src="images/s_tel.png" align="absmiddle"/></a></span>
        </span>
        </div>
    </div>
    <div class="top">
        <div class="logo"><a href="Index.html"><img src="images/logo.png"/></a></div>
        <div class="search">
            <input type="text" v-model="name" class="s_ipt"/>
            <input type="button" value="搜索" @click.prevent="selectProduct()" class="s_btn"/>
            <!--            <span class="fl"><a href="#">咖啡</a><a href="#">iphone 6S</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a-->
            <!--                    href="#">日用品</a><a href="#">连衣裙</a></span>-->
        </div>
        <div class="i_car">
            <div class="car_t">购物车 [ <span>{{car.totalNum}}</span> ]</div>
            <div class="car_bg">
                <!--Begin 购物车未登录 Begin-->
                <div v-if="loginUser.loginName=='' " class="un_login">还未登录！<a href="Login.html"
                                                                                  style="color:#ff4e00;">马上登录</a>
                    查看购物车！
                </div>
                <!--End 购物车未登录 End-->
                <!--Begin 购物车已登录 Begin-->
                <div v-else-if="car.totalPrice!=0">
                    <ul class="cars">
                        <li v-for="carDetail in carDetailList">
                            <div class="img"><a href="#"><img
                                    :src="'http://192.168.126.132:8090/easyBuy/files/'+carDetail.fileName" width="58"
                                    height="58"/></a></div>
                            <div class="name"><a href="#">{{carDetail.productName}}</a></div>
                            <div class="price"><font color="#ff4e00">￥{{ carDetail.totalPrice }}</font>
                                X{{ carDetail.totalNum }}
                            </div>
                        </li>

                    </ul>
                    <div class="price_sum">共计&nbsp; <font color="#ff4e00">￥</font><span>{{car.totalPrice}}</span>
                    </div>
                    <div class="price_a"><a href="BuyCar.html">去购物车结算</a></div>
                    <!--End 购物车已登录 End-->
                </div>
                <div v-else class="un_login">暂无商品！<a href="CategoryList.html" style="color:#ff4e00;">去购买</a>
                </div>
            </div>
        </div>
    </div>
    <!--End Header End-->
    <!--Begin Menu Begin-->
    <div class="menu_bg">
        <div class="menu">
            <!--Begin 商品分类详情 Begin-->
            <div class="nav">
                <div class="nav_t" @click="doClear()" style="cursor: pointer; "><span>全部商品分类</span></div>
                <div class="leftNav none">
                    <ul>
                        <li>
                            <div class="fj">
                                <span class="n_img"><span></span><img src="images/nav1.png"/></span>
                                <span class="fl">进口食品、生鲜</span>
                            </div>
                            <div class="zj">
                                <div class="zj_l">
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                </div>
                                <div class="zj_r">
                                    <a href="#"><img src="images/n_img1.jpg" width="236" height="200"/></a>
                                    <a href="#"><img src="images/n_img2.jpg" width="236" height="200"/></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="fj">
                                <span class="n_img"><span></span><img src="images/nav2.png"/></span>
                                <span class="fl">食品、饮料、酒</span>
                            </div>
                            <div class="zj" style="top:-40px;">
                                <div class="zj_l">
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力2</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                </div>
                                <div class="zj_r">
                                    <a href="#"><img src="images/n_img1.jpg" width="236" height="200"/></a>
                                    <a href="#"><img src="images/n_img2.jpg" width="236" height="200"/></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="fj">
                                <span class="n_img"><span></span><img src="images/nav3.png"/></span>
                                <span class="fl">母婴、玩具、童装</span>
                            </div>
                            <div class="zj" style="top:-80px;">
                                <div class="zj_l">
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力3</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                </div>
                                <div class="zj_r">
                                    <a href="#"><img src="images/n_img1.jpg" width="236" height="200"/></a>
                                    <a href="#"><img src="images/n_img2.jpg" width="236" height="200"/></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="fj">
                                <span class="n_img"><span></span><img src="images/nav4.png"/></span>
                                <span class="fl">家居、家庭清洁、纸品</span>
                            </div>
                            <div class="zj" style="top:-120px;">
                                <div class="zj_l">
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力4</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                </div>
                                <div class="zj_r">
                                    <a href="#"><img src="images/n_img1.jpg" width="236" height="200"/></a>
                                    <a href="#"><img src="images/n_img2.jpg" width="236" height="200"/></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="fj">
                                <span class="n_img"><span></span><img src="images/nav5.png"/></span>
                                <span class="fl">美妆、个人护理、洗护</span>
                            </div>
                            <div class="zj" style="top:-160px;">
                                <div class="zj_l">
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力5</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                </div>
                                <div class="zj_r">
                                    <a href="#"><img src="images/n_img1.jpg" width="236" height="200"/></a>
                                    <a href="#"><img src="images/n_img2.jpg" width="236" height="200"/></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="fj">
                                <span class="n_img"><span></span><img src="images/nav6.png"/></span>
                                <span class="fl">女装、内衣、中老年</span>
                            </div>
                            <div class="zj" style="top:-200px;">
                                <div class="zj_l">
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力6</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                </div>
                                <div class="zj_r">
                                    <a href="#"><img src="images/n_img1.jpg" width="236" height="200"/></a>
                                    <a href="#"><img src="images/n_img2.jpg" width="236" height="200"/></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="fj">
                                <span class="n_img"><span></span><img src="images/nav7.png"/></span>
                                <span class="fl">鞋靴、箱包、腕表配饰</span>
                            </div>
                            <div class="zj" style="top:-240px;">
                                <div class="zj_l">
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力7</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                </div>
                                <div class="zj_r">
                                    <a href="#"><img src="images/n_img1.jpg" width="236" height="200"/></a>
                                    <a href="#"><img src="images/n_img2.jpg" width="236" height="200"/></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="fj">
                                <span class="n_img"><span></span><img src="images/nav8.png"/></span>
                                <span class="fl">男装、运动</span>
                            </div>
                            <div class="zj" style="top:-280px;">
                                <div class="zj_l">
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力8</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                </div>
                                <div class="zj_r">
                                    <a href="#"><img src="images/n_img1.jpg" width="236" height="200"/></a>
                                    <a href="#"><img src="images/n_img2.jpg" width="236" height="200"/></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="fj">
                                <span class="n_img"><span></span><img src="images/nav9.png"/></span>
                                <span class="fl">手机、小家电、电脑</span>
                            </div>
                            <div class="zj" style="top:-320px;">
                                <div class="zj_l">
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力9</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                </div>
                                <div class="zj_r">
                                    <a href="#"><img src="images/n_img1.jpg" width="236" height="200"/></a>
                                    <a href="#"><img src="images/n_img2.jpg" width="236" height="200"/></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="fj">
                                <span class="n_img"><span></span><img src="images/nav10.png"/></span>
                                <span class="fl">礼品、充值</span>
                            </div>
                            <div class="zj" style="top:-360px;">
                                <div class="zj_l">
                                    <div class="zj_l_c">
                                        <h2>零食 / 糖果 / 巧克力10</h2>
                                        <a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a
                                            href="#">牛肉干</a>|<a href="#">巧克力</a>|
                                        <a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a
                                            href="#">蜜饯</a>|<a href="#">红枣</a>|
                                        <a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
                                            href="#">蜜饯</a>|
                                    </div>
                                </div>
                                <div class="zj_r">
                                    <a href="#"><img src="images/n_img1.jpg" width="236" height="200"/></a>
                                    <a href="#"><img src="images/n_img2.jpg" width="236" height="200"/></a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--End 商品分类详情 End-->
            <ul class="menu_r">
                <li><a href="Index.html">首页</a></li>
                <li v-for="(type) in typeList" v-if="type.type==1">
                    <a href="#" @click.prevent="typeSelect(type.id)">{{type.name}}</a>
                </li>
            </ul>
            <div class="m_ad">中秋送好礼！</div>
        </div>
    </div>
    <!--End Menu End-->
    <!--End 筛选条件 End-->

    <div class="content mar_20">
        <div class="l_history">
            <div class="his_t">
                <span class="fl">商品收藏</span>
                <span class="fr"><a href="#" @click.prevent="delAllLikes()">清空</a></span>
            </div>
            <ul>
                <li v-for="like in likes" @click="toProductDetail(like.productId)">
                    <div class="img"><a href="#"><img :src="'http://192.168.126.132:8090/easyBuy/files/'+like.fileName"
                                                      width="185" height="162"/></a></div>
                    <div class="name"><a href="#">{{like.productName}}</a></div>
                    <div class="price">
                        <font>￥<span>{{like.price}}</span></font>
                    </div>
                </li>
            </ul>
        </div>
        <div v-if="pageInfo.total===0"><p style="text-align: center;font-size: 18px;font-weight: bolder">暂无数据</p>
        </div>
        <div class="l_list" v-else>
            <div class="list_t">
                <span class="fr">共发现{{pageInfo.total}}件</span>
            </div>
            <div class="list_c">
                <ul class="cate_list">
                    <li v-for="product in productList">
                        <div class="img"><a href="#" @click.prevent="toProductDetail(product.id)"><img
                                :src="'http://192.168.126.132:8090/easyBuy/files/'+product.fileName" width="210"
                                height="185"/></a>
                        </div>
                        <div class="price">
                            <font>￥<span>{{product.price}}</span></font> &nbsp; 元
                        </div>
                        <div class="name" @click.prevent="toProductDetail(product.id)"><span
                                v-html="product.name"></span></div>
                        <div class="carbg">
                            <a href="#" class="ss" @click.prevent="addLike(product.id)">收藏</a>
                            <a href="#" class="j_car" @click.prevent="toCar(product.id)">加入购物车</a>
                        </div>
                    </li>
                </ul>

                <div style="text-align: center;scale: 1.2" id="goPage">
                    <span>第{{pageInfo.pageNum}}/{{pageInfo.pages}}页</span>&nbsp;&nbsp;

                    <div v-if="pageInfo.pageNum>1" @click="nextPage('home')">首页</div>
                    <div v-if="pageInfo.pageNum>1" @click="nextPage('pre')">上页</div>
                    <div v-for="index in pageInfo.pages" v-if="index>pageInfo.pages-4" @click="nextPage(index)"
                         :class="{ myBack: currentPage === index }">
                        {{index}}
                    </div>
                    <div v-if="pageInfo.pageNum<pageInfo.pages" @click.prevent="nextPage('next')">下页</div>
                    <div v-if="pageInfo.pageNum<pageInfo.pages" @click.prevent="nextPage('end')">尾页</div>
                </div>
            </div>
        </div>
    </div>

    <!--Begin Footer Begin -->
    <div class="b_btm_bg bg_color">
        <div class="b_btm">
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                   cellspacing="0" cellpadding="0">
                <tr>
                    <td width="72"><img src="images/b1.png" width="62" height="62"/></td>
                    <td><h2>正品保障</h2>正品行货 放心购买</td>
                </tr>
            </table>
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                   cellspacing="0" cellpadding="0">
                <tr>
                    <td width="72"><img src="images/b2.png" width="62" height="62"/></td>
                    <td><h2>满38包邮</h2>满38包邮 免运费</td>
                </tr>
            </table>
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                   cellspacing="0" cellpadding="0">
                <tr>
                    <td width="72"><img src="images/b3.png" width="62" height="62"/></td>
                    <td><h2>天天低价</h2>天天低价 畅选无忧</td>
                </tr>
            </table>
            <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                   cellspacing="0" cellpadding="0">
                <tr>
                    <td width="72"><img src="images/b4.png" width="62" height="62"/></td>
                    <td><h2>准时送达</h2>收货时间由你做主</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="b_nav">
        <dl>
            <dt><a href="#">新手上路</a></dt>
            <dd><a href="#">售后流程</a></dd>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">订购方式</a></dd>
            <dd><a href="#">隐私声明</a></dd>
            <dd><a href="#">推荐分享说明</a></dd>
        </dl>
        <dl>
            <dt><a href="#">配送与支付</a></dt>
            <dd><a href="#">货到付款区域</a></dd>
            <dd><a href="#">配送支付查询</a></dd>
            <dd><a href="#">支付方式说明</a></dd>
        </dl>
        <dl>
            <dt><a href="#">会员中心</a></dt>
            <dd><a href="#">资金管理</a></dd>
            <dd><a href="#">我的收藏</a></dd>
            <dd><a href="#">我的订单</a></dd>
        </dl>
        <dl>
            <dt><a href="#">服务保证</a></dt>
            <dd><a href="#">退换货原则</a></dd>
            <dd><a href="#">售后服务保证</a></dd>
            <dd><a href="#">产品质量保证</a></dd>
        </dl>
        <dl>
            <dt><a href="#">联系我们</a></dt>
            <dd><a href="#">网站故障报告</a></dd>
            <dd><a href="#">购物咨询</a></dd>
            <dd><a href="#">投诉与建议</a></dd>
        </dl>
        <div class="b_tel_bg">
            <a href="#" class="b_sh1">新浪微博</a>
            <a href="#" class="b_sh2">腾讯微博</a>
            <p>
                服务热线：<br/>
                <span>400-123-4567</span>
            </p>
        </div>
        <div class="b_er">
            <div class="b_er_c"><img src="images/er.gif" width="118" height="118"/></div>
            <img src="images/ss.png"/>
        </div>
    </div>
    <div class="btmbg">
        <div class="btm">
            备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright © 2015-2018 尤洪商城网 All Rights
            Reserved. 复制必究 , Technical Support: Dgg Group <br/>
            <img src="images/b_1.gif" width="98" height="33"/><img src="images/b_2.gif" width="98" height="33"/><img
                src="images/b_3.gif" width="98" height="33"/><img src="images/b_4.gif" width="98" height="33"/><img
                src="images/b_5.gif" width="98" height="33"/><img src="images/b_6.gif" width="98" height="33"/>
        </div>
    </div>
    <!--End Footer End -->
</div>
<script type="text/javascript" src="js/axios.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
    const urlParams = new URLSearchParams(window.location.search);
    const name = urlParams.get('name');
    const categoryId = urlParams.get('categoryId');
    const myVue = new Vue({
        el: '#myVue',
        data: {
            likes: [],
            carDetailList: [],
            car: '',
            pageInfo: '',
            productList: '',
            typeId: '',
            typeList: '',
            type1List: '',
            name: '',
            categoryId: '',
            currentPage: 1,
            loginUser: {
                userId: "-1",
                loginName: ''
            },
        },
        methods: {
            toProductDetail: function (id) {
                window.location = 'Product.html?id=' + id;
            },
            delAllLikes: function () {
                if (myVue.loginUser.loginName === '') {
                    alert("请登录！")
                    return;
                }
                const isGo = window.confirm("是否清空收藏")
                if (!isGo) {
                    return;
                } else {
                    axios({
                        url: '/api/like/delAll',
                        params: {
                            loginName: myVue.loginUser.loginName,
                        }
                    }).then(rs => {
                        if (rs.data.isDel) {
                            alert("已清空!")
                            this.getLikes()
                        }
                    })
                }
            },
            getLikes: function () {
                axios({
                    url: '/api/like/getLikes',
                    params: {
                        loginName: myVue.loginUser.loginName,
                    }
                }).then(rs => {
                    let array = [];
                    for (index in rs.data.likes) {
                        array.push(rs.data.likes[index])
                    }
                    this.likes = array
                })
            },
            addLike: function (id) {
                if (myVue.loginUser.loginName === '') {
                    alert("请登录！")
                    return;
                }
                axios({
                    url: '/api/product/getPro',
                    params: {
                        id
                    }
                }).then(function (rs) {
                    axios({
                        url: '/api/like/addLike',
                        params: {
                            loginName: myVue.loginUser.loginName,
                            productId: rs.data.product.id,
                            productName: rs.data.product.name,
                            fileName: rs.data.product.fileName,
                            price: rs.data.product.price,
                            stock: rs.data.product.stock,
                        }
                    }).then(function (rs) {
                        myVue.getLikes();
                    })
                })
            },
            toCar: function (id) {
                if (myVue.loginUser.loginName === '') {
                    alert("请登录！")
                    return;
                }
                axios({
                    url: '/api/product/getPro',
                    params: {
                        id
                    }
                }).then(function (rs) {
                    let carStock=0;
                    for (let index in myVue.carDetailList) {
                       if (id==myVue.carDetailList[index].productId) {
                           carStock=myVue.carDetailList[index].totalNum;
                       }
                    }
                    const stock = rs.data.product.stock
                    if (stock <= carStock) {
                        alert("库存不足!")
                        return;
                    }
                    axios({
                        url: '/api/car/addCar',
                        params: {
                            loginName: myVue.loginUser.loginName,
                            productId: rs.data.product.id,
                            totalNum: 1,
                            productName: rs.data.product.name,
                            fileName: rs.data.product.fileName,
                            price: rs.data.product.price,
                            stock: rs.data.product.stock,
                        }
                    }).then(function (rs) {
                        myVue.getCar();
                        console.log(myVue.loginUser.loginName)
                    })
                })
            },
            getCar: function () {
                axios({
                    url: '/api/car/getCar',
                    params: {
                        loginName: this.loginUser.loginName
                    }
                }).then(rs => {
                    this.car = rs.data.car
                    this.carDetailList = [];
                    for (car in rs.data.carMap) {
                        this.carDetailList.push(rs.data.carMap[car]);
                    }
                })
            },
            nextPage: function (opr) {
                let pageNum = 1;
                if (typeof opr === 'number') {
                    this.currentPage = opr;
                    this.selectProduct(opr, 12);
                    return;
                }
                switch (opr) {
                    case 'pre':
                        pageNum = this.pageInfo.pageNum > 1 ? this.pageInfo.pageNum - 1 : 1;
                        break;
                    case 'next':
                        pageNum = this.pageInfo.pageNum < this.pageInfo.pages ? this.pageInfo.pageNum + 1 : this.pageInfo.pages;
                        break;
                    case 'end':
                        pageNum = this.pageInfo.pages;
                        break;
                }
                this.currentPage = pageNum;
                this.selectProduct(pageNum, 12);
            },
            doClear: function () {
                this.name = '';
                this.categoryId = '';
                this.selectProduct()
            },
            typeSelect: function (id) {
                this.categoryId = id;
                this.selectProduct()
            },
            selectProduct: function (pageNum, pageSize) {
                axios({
                    url: '/api/product/ProductELServiceImpl',
                    params: {
                        name: this.name, categoryId: this.categoryId, pageNum, pageSize
                    }
                }).then(rs => {
                    this.currentPage = pageNum;
                    this.pageInfo = rs.data.pageInfo;
                    this.productList = rs.data.pageInfo.list;
                })
            },
            loginOut: function () {
                window.sessionStorage.clear();
                axios({
                    url:'/api/user/exit'
                }).then(rs=>{
                    if (rs.data.code===200){
                        alert("注销成功!")
                    }else {
                        alert("注销失败！")
                    }
                })
            },
            doInit: function () {
                this.name = name;
                this.categoryId = categoryId;
                this.selectProduct();
                axios({
                    url: '/api/type/getList',
                    params: {}
                }).then(function (rs) {
                    myVue.typeList = rs.data.typeList;
                    let array = [];
                    for (const type in myVue.typeList) {
                        if (myVue.typeList[type].parentId == 0) {
                            array.push(myVue.typeList[type])
                        }
                    }
                    myVue.type1List = array
                })
            }
        },
        created: function () {
            let token = window.sessionStorage.getItem('token');
            if (token === '' || token === null) {
                this.doInit();
                this.getCar();
            } else {
                axios({
                    url: '/api/user/findUserFromRedis'
                }).then(rs => {
                    if (rs.data.code === 200) {
                        this.loginUser.userId = rs.data.user.id;
                        this.loginUser.loginName = rs.data.user.loginName;
                        this.doInit();
                        this.getCar();
                        this.getLikes();
                    }
                })
            }
        }
    })
</script>
</body>
</html>
